<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="体检号" prop="PE_ID">
        <el-input
          v-model="queryParams.PE_ID"
          placeholder="请输入体检号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="体检次数" prop="PE_VISIT_ID">
        <el-input
          v-model="queryParams.PE_VISIT_ID"
          placeholder="请输入体检次数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="身份证" prop="ID_NO">
        <el-input
          v-model="queryParams.ID_NO"
          placeholder="请输入身份证"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="审核状态" prop="saveFile">
        <el-select v-model="queryParams.saveFile"   clearable  placeholder="请选择">
          <el-option label="已审核" value="1" ></el-option>
          <el-option label="待审核" value="0" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核日期"  prop="dateRange">
        <el-date-picker
          v-model="queryParams.dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="上传状态" prop="UPLOAD">
        <el-select v-model="queryParams.UPLOAD"   clearable  placeholder="请选择">
          <el-option

            v-for="item in postOptions"
            :key="item.id"
            :label="item.title"
            :value="item.id"
            :disabled="item.status == 1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="终审日期"  prop="createDateRange">
        <el-date-picker
          v-model="queryParams.createDateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="12">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"

        >审核</el-button>
      </el-col>
      <el-col :span="10">
      <el-alert
     title="乳腺病史上报会同时将乳腺触诊和B超结果同时上报，请务必要记得审核乳腺触诊和B超结果。再点上传！"
     type="error">
     </el-alert>
     </el-col>
      <el-col :span="2">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"

          @click="uploadRXABS"

        >上报</el-button>
      </el-col>

<!--      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>-->
    </el-row>


    <el-table v-loading="loading" :data="rxabsList" @selection-change="handleSelectionChange"  :cell-class-name="tableCellClassName" :cell-style="columnStyle" @cell-click="editRow" border height="calc(100vh - 265px)">

      <el-table-column type="selection" width="55" align="center" fixed />

      <el-table-column label="序号" width="50px"  prop="index" align="center" fixed>
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column label="上传状态"  width="100"  align="center" prop="upload" fixed >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.upload === '1'"
                  type="success"
                  disable-transitions>已上传</el-tag>
          <el-tag v-else-if="scope.row.upload === '0'" type="danger" disable-transitions>上传失败</el-tag>
          <el-tag v-else type="info" disable-transitions>未上传</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="100"  align="center" prop="saveFile" fixed >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.saveFile === '1'"
            type="success"
            disable-transitions>已审核</el-tag>
          <el-tag v-else type="danger" disable-transitions>未审核</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="60" fixed>
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >审核</el-button>
        </template>
      </el-table-column>
      <el-table-column label="体检号" align="center" prop="peId" width="100" fixed/>
      <el-table-column label="次数" align="center" prop="peVisitId" width="50"  fixed/>
      <el-table-column  v-if="false"  label="阳性结果" align="center" prop="deptResult" width="180" fixed>
      </el-table-column>
      <el-table-column label="结果" align="center" prop="result" width="350" fixed>
      </el-table-column>
      <el-table-column label="末次月经" align="center" prop="lastMenstrualPeriod" width="140">
        <template slot-scope="scope" >
          <el-date-picker style="width: 125px" v-if="(scope.$index + 1)==chickRow"
            v-model="scope.row.lastMenstrualPeriod"
            type="date"
            placeholder="选择日期"
            size="mini"
          >
          </el-date-picker>
          <span v-else>{{scope.row.lastMenstrualPeriod}}</span>
        </template>
      </el-table-column>
      <el-table-column label="既往检查" width="100" align="center" prop="checkBreastCancer" >
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.checkBreastCancer" v-if="(scope.$index + 1)==chickRow"></el-checkbox>
          <span v-else>{{scope.row.checkBreastCancer==true?'是':'否' }}</span>
        </template>
      </el-table-column>

        <el-table-column label="检查内容" align="center" prop="examinationScope" width="300"  >
          <template slot-scope="scope">
         <el-input v-model="scope.row.examinationScope" placeholder="请输入内容" maxlength="80" show-word-limit></el-input>

          <!-- <el-checkbox-group v-model="scope.row.examinationScope" placeholder="请选择" size="small">
         <el-checkbox label="未见异常" border></el-checkbox>
         <el-checkbox label="异常" border disabled></el-checkbox>
          </el-checkbox-group> -->
        </template>
      </el-table-column>


      <!-- <el-table-column label="检查时间" align="center" prop="checkDate" width="100">
      </el-table-column>
      <el-table-column label="检查医生" align="center" prop="checkPerson" width="80"/> -->
      <el-table-column label="终审时间" align="center" prop="createTime" width="80">
      </el-table-column>
      <el-table-column label="身份证" align="center" prop="idNo" width="200" />
      <el-table-column label="审核人员" align="center" prop="savePerson" width="80">
      </el-table-column>
      <el-table-column label="审核时间" align="center" prop="saveDate" width="80">
      </el-table-column>
      <el-table-column label="失败内容" align="center" prop="uploadresult" width="100">
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      :page-sizes="[100, 200, 300, 400]"

      @pagination="getList"
    />

  </div>
</template>

<script>
import { bslist, bssave ,batchSave,uploadRXABS,rxatest} from "@/api/platform/rxabs";

export default {
  name: "rxabs",
  dicts: ['sys_yes_no'],
  data() {
    return {
      chickRow:0,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      //
      postOptions: [{id:"1", title:"成功"},{id:"0", title:"失败"},{id:"2", title:"未上传"}],

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 宫颈癌病史表格数据
      rxabsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        PE_ID: null,
        PE_VISIT_ID: null,
        ID_NO: null,
        BH: null,
        UPLOAD: null,
        dateRange:null,
        templateId:null,
        createDateRange:null,
        saveFile:null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    uploadRXABS()
    {
      rxatest().then(response => {
        if(response.code=='200')
        {
          uploadRXABS().then(response => {
        this.$message({
          type: 'success',
          message: response
           });
          });
        }
        else
         {
          console.log(response);
              this.$message({
                type: 'warning',
                message: '上传失败，'
              });
         }
        });
    },
    editRow(row, column, cell, event)
    {
      console.log(row.index)
      if(row.upload != '1')
      {
        this.chickRow=row.index+1
      }
    },
    tableCellClassName({row, column, rowIndex, columnIndex})
    {

      //利用单元格的 className 的回调方法，给行列索引赋值
      row.index=rowIndex;
      column.index=columnIndex;
    },
    /** 查询宫颈癌病史列表 */
    getList() {
      this.loading = true;
      bslist(this.queryParams).then(response => {
        this.rxabsList = response.rows;
        for(var i=0 ;i<this.rxabsList.length;i++)
        {
          if(this.rxabsList[i].treated=='1')
          {
            this.rxabsList[i].treated=true
          }
          else
          {
            this.rxabsList[i].treated=false
          }
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    //
     /** 自定义编号 */
     indexMethod(index){
      let pageNum = this.queryParams.pageNum - 1;
      if((pageNum!==-1 && pageNum!==0)){
        return (index + 1) + (pageNum  * this.queryParams.pageSize);
      }else{
        return (index + 1)
      }
    },

    // 表单重置
    reset() {
      this.form = {
        PE_ID: null,
        PE_VISIT_ID: null,
        ID_NO: null,
        pId: null,
        lastMenstrualPeriod: null,
        TREATED: null,
        treatedYear: null,
        BH: null,
        AUTO_VALUE: null,
        saveDate: null,
        savePerson: null,
        saveFile: null,
        UPLOAD: null,
        UPLOADRESULT: null,
        yearReported: null,
        quarterlyReported: null,
        checkDate: null,
        checkPerson: null,
        deptResult: null,
        result: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    columnStyle({ row, column, rowIndex, columnIndex }) {
      //第一列的背景色
	    if (columnIndex  == 9 ||columnIndex  == 10 || columnIndex == 8  ) {
            return "background:#f5fff0";
	    }
	 },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // console.log(selection)选中行所有数据
      this.ids = selection.map(item => item)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      // var arrayList=[];
      // for(let i = 0; i < this.ids.length; i++) {
      //   let tmp=this.ids[i].split("-")
      //   for(let j = 0; j < this.gjgbsList.length; j++) {
      //     if(this.gjgbsList[j].peId==tmp[0] && this.gjgbsList[j].peVisitId==tmp[1])
      //     {
      //       arrayList.push(this.gjgbsList[j])
      //     }
      //   }
      // }
      let data ={"data":this.ids};
      this.loading = true;
      this.chickRow=null
      batchSave(data).then(response => {
          if(response.code=='200')
          {
            this.$message({
              type: 'success',
              message: '审核成功'
            });
            this.getList();
          }
          else
          {
            this.$message({
              type: 'warning',
              message: '审核失败'
            });
          }
      });

    },
    /** 修改按钮操作 */
    handleUpdate(row) {

      if(row.saveFile=='1')
      {
        this.$confirm('是否重新审核['+row.peId+']-['+row.peVisitId+']乳腺癌病史数据，并覆盖保存?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bssave(row).then(response => {
            if(response.code=='200')
            {
              this.$message({
                type: 'success',
                message: '审核成功'
              });
              row.saveFile='1'
            }
            else
            {
              this.$message({
                type: 'warning',
                message: '审核失败'
              });
            }
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核'
          });
        });
      }
      else
      {
       bssave(row).then(response => {
          if(response.code=='200')
          {
            this.$message({
              type: 'success',
              message: '审核成功'
            });
            row.saveFile='1'
          }
          else
          {
            this.$message({
              type: 'warning',
              message: '审核失败'
            });
          }
        });
      }

    },

    /** 删除按钮操作 */
    handleEscalation(row) {

    },

  }
};
</script>

<style lang="scss" scoped>
  ::v-deep .el-table {
    .el-table__fixed {
      height:auto !important; // 此处的important表示优先于element.style
      bottom:17px; // 改为自动高度后，设置与父容器的底部距离，则高度会动态改变
    }
  }
  // 设置显示两行，超出省略
  ::v-deep .el-table th > .cell {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: rgb(17, 17, 17);
  }

</style>
